<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="门店名称：">
      <el-input v-model="ruleForm.name" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="门店电话：" prop="phone">
      <el-input v-model.number="ruleForm.telephone" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="门店地址：">
      <el-input v-model="ruleForm.address" class="selWidth"></el-input>
    </el-form-item>
    <el-form-item label="付款二维码">
      <div class="upLoadPicBox" @click="modalPicTap('1')">
        <div v-if="ruleForm.imageUrl" class="pictrue">
          <img :src="ruleForm.imageUrl" />
        </div>
        <div v-else class="upLoad">
          <i class="el-icon-camera cameraIconfont" />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="营业时间：">
      <el-time-picker
        is-range
        v-model="ruleForm.dayTime"
        type="date"
        class="selWidth"
        value-format="HH:mm"
        placeholder="选择日期"
      >
      </el-time-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { shopAddApi, shopInfoApi, shopUpdateApi } from "@/api/user";
const defaultObj = {
  name: "",
  telephone: "",
  address: "",
  imageUrl: "",
  dayTime: null
};
export default {
  name: "UserEdit",
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      ruleForm: Object.assign({}, defaultObj),
      rules: {}
    };
  },
  mounted() {
    if (this.id) this.shopInfo();
  },
  methods: {
    // 详情
    shopInfo() {
      shopInfoApi({ id: this.id }).then(async res => {
        this.ruleForm = {
          name: res.name,
          telephone: res.telephone,
          address: res.address,
          imageUrl: res.imageUrl,
          dayTime: res.dayTime.split("-")
        };
      });
    },
    modalPicTap(tit, num, i) {
      const _this = this;
      this.$modalUpload(
        function(img) {
          _this.ruleForm.imageUrl = img[0].sattDir;
        },
        tit,
        "content"
      );
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const data = {
            ...this.ruleForm,
            dayTime: `${this.ruleForm.dayTime[0]}-${this.ruleForm.dayTime[1]}`
          };
          if (this.id) {
            data.id = this.id;
            shopUpdateApi(data).then(async res => {
              this.$message.success("编辑成功");
              this.$parent.$parent.visible = false;
              this.$parent.$parent.getList();
            });
          } else {
            shopAddApi(data).then(async res => {
              this.$message.success("新增成功");
              this.$parent.$parent.visible = false;
              this.$parent.$parent.getList();
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("resetForm");
    }
  }
};
</script>

<style scoped>
.selWidth {
  width: 90%;
}
</style>
